<template>
    <div>
        <el-form label-width="auto">
            <div class="params-form-gray params">
                <el-form-item label="科目" prop="subjectId">
                    <el-cascader v-model="params.subjectId" :options="options" style="flex: 1;"
                        :props="{ label: 'subjectName', value: 'subjectId' }" :show-all-levels="false" />
                </el-form-item>
                <el-form-item label="发生时间" prop="date">
                    <el-date-picker v-model="params.date" type="daterange" start-placeholder="开始时间"
                        end-placeholder="结束时间" value-format="YYYY-MM-DD" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" :icon="Search" @click="init">查询</el-button>
                    <el-button type="primary" plain :icon="RefreshRight" @click="reset">重置</el-button>
                </el-form-item>
            </div>
        </el-form>
        <div class="count-title"><span>合计金额</span>（所有筛选记录）</div>
        <div class="count">
            <div>资产余额：<span>{{ countNumber[1]||'0.00' }}</span></div>
            <div>负债余额：<span>{{ countNumber[2]||'0.00' }}</span></div>
            <div>损益收入余额：<span>{{ countNumber[4]||'0.00' }}</span></div>
            <div>损益费用余额：<span>{{ countNumber[5]||'0.00' }}</span></div>
            <div>权益余额：<span>{{ countNumber[3]||'0.00' }}</span></div>
        </div>
        <div class="opeater">
            <div class="left">
                <el-button type="primary" @click="exportData">导出</el-button>
            </div>
        </div>
        <div class="table-group">
            <el-table :data="data" style="width: 100%" max-height="calc(100vh - 470px)" @selection-change="handleSelectionChange" >
                <el-table-column prop="subjectType" label="账户类型" width="180">
                    <template #default='scope'>
                        {{subjectType[scope.row.subjectType]}}
                    </template>
                </el-table-column>
                <el-table-column prop="subjectCode" label="科目编码" width="200" />
                <el-table-column prop="subjectName" label="科目名称" min-width="200"/>
                <el-table-column prop="remark" label="期初金额" width="150">
                    <el-table-column prop="beginDebtorMoney" label="借方" width="120" />
                    <el-table-column prop="beginCreditorMoney" label="贷方" width="120" />
                </el-table-column>
                <el-table-column prop="address" label="本期发生" width="240">
                    <el-table-column prop="currentDebtorMoney" label="借方" width="120" />
                    <el-table-column prop="currentCreditorMoney" label="贷方" width="120" />
                </el-table-column>
                <el-table-column prop="orderCode" label="期末余额" width="240">
                    <el-table-column prop="endDebtorMoney" label="借方" width="120" />
                    <el-table-column prop="endCreditorMoney" label="贷方" width="120" />
                </el-table-column>
                <template #empty>
                    <el-empty />
                </template>
            </el-table>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { RefreshRight, Search } from '@element-plus/icons-vue';
import {  getSubjectTree ,getSubjectStatistics,exportSubjectStatistics} from "@/apis/record";

const params = ref({
});
const options = ref([])
const data = ref([])
const reset = () => {
    params.value = {};
    init()
}
const subjectType={
    1:'资产',
    2:'负债',
    3:'权益',
    4:'损益-收入',
    5:'损益-费用',
}
const countNumber=ref({});
const getparamData=()=>{
    const paramsData={...params.value};
    const subjectId = paramsData.subjectId ? paramsData.subjectId[paramsData.subjectId.length - 1] : undefined;
    if (paramsData.date) {
        paramsData.startDate = paramsData.date[0]+' '+'00:00:00';
        paramsData.endDate = paramsData.date[1]+' '+'23:59:59';
    }
    delete paramsData.date;
    return {...paramsData,subjectId};
}
/**
 * 初始化
 */
const init = async () => {
    const res = await getSubjectStatistics(getparamData());
    data.value = res.data.subjectStatistics;
    countNumber.value=res.data.loanedBills;
}
/**
 * 获取科目树
 */
const getTree = async () => {
    const res = await getSubjectTree();
    options.value = res.data;
}
const exportData = async () => {
    const res = await exportSubjectStatistics(getparamData());
    const url = URL.createObjectURL(res);
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download','发生额及余额.xlsx');
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}
const getCount=async ()=>{

}
onMounted(() => {
    init();
    getTree();
    getCount()
})
</script>

<style lang="scss" scoped>
@import '../index.scss';

::v-deep(.is-group){
    border-bottom:$border;
    tr th.el-table__cell{
        background:#F2F6FC;
    }
    .cell{
        display:flex;
        justify-content:center;   
    }
    .el-table__cell{
        border:none !important;
    }
    >tr:last-child{
        th.el-table__cell{
            border-bottom:$border !important;
        }
    }
    .is-leaf{
        border-bottom:$border !important;
    }
}
::v-deep(.el-table__row){
    height:50px;
    border-bottom:$border;
    .el-table__cell{
        border:none;
        border-bottom:$border;
    }
    .cell{
        display:flex;
        justify-content:center;
    }
    &:nth-child(even){
        background:#F2F6FC;
    }
}
</style>